<template>
  <el-dialog title="新增菜单栏" :visible.sync="open" width="500px">
    <el-form :model="formData" size="small" label-width="100px">
      <el-form-item prop="parentId" label="上级菜单">
        <el-select v-model="formData.parentId" placeholder="请选择菜单栏">
          <el-option label="无" :value="0"></el-option>
          <el-option
            v-for="item in menuList"
            :key="item.menuId"
            :label="item.menuName"
            :value="item.menuId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="menuName" label="菜单栏名称">
        <el-input v-model="formData.menuName"></el-input>
      </el-form-item>
      <el-form-item prop="menuKey" label="路由唯一键">
        <el-input v-model="formData.menuKey"></el-input>
      </el-form-item>
      <el-form-item prop="path" label="链接地址">
        <el-input v-model="formData.path"></el-input>
      </el-form-item>
      <el-form-item prop="component" label="组件">
        <el-input v-model="formData.component"></el-input>
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="formData.menuType">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="formData.icon"></el-input>
      </el-form-item>
      <el-form-item prop="redirect" label="重定向地址">
        <el-input v-model="formData.redirect"></el-input>
      </el-form-item>
      <el-form-item prop="visible" label="状态">
        <el-select v-model="formData.visible">
          <el-option label="显示" :value="0"></el-option>
          <el-option label="隐藏" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="打开方式"
        prop="target"
        v-if="formData.menuType === 'C'"
      >
        <el-select v-model="formData.target" placeholder="请选择">
          <el-option label="当前窗口" value></el-option>
          <el-option label="新窗口" value="_blank"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示排序" prop="orderNum">
        <el-input v-model="formData.orderNum"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="onSubmit"
        size="small"
        :loading="Loading"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { addAndUpdateMenu } from "@/api/userManagement/menu";
export default {
  props: {
    menuList: {
      type: Array,
    },
  },
  data() {
    return {
      open: false,
      formData: {
        parentId: 0, //菜单栏父id
        menuName: "", //菜单栏名称,
        path: "", //菜单栏路径
        menuKey: "", //路由唯一键
        component: "", //组件
        redirect: "", //是否打开外连接
        visible: 0, //菜单栏是否隐藏 0或者1
        orderNum: "", //显示排序
        menuType: "M", //菜单栏类型 M:目录 C:菜单
        target: "", //当前窗口:""新窗口:_blank  menuType:C显示
        icon: "", //icon menuType:C显示
      },
      Loading: false,
    };
  },
  methods: {
    edit(item) {
      this.open = true;
      this.formData = JSON.parse(JSON.stringify(item))
    },
    show() {
      this.open = true;
      this.formData = {
        parentId: 0, //菜单栏父id
        menuName: "", //菜单栏名称,
        path: "", //菜单栏路径
        menuKey: "", //路由唯一键
        component: "", //组件
        redirect: "", //是否打开外连接
        visible: 0, //菜单栏是否隐藏 0或者1
        orderNum: "", //显示排序
        menuType: "M", //菜单栏类型 M:目录 C:菜单
        target: "", //当前窗口:""新窗口:_blank  menuType:C显示
        icon: "", //icon menuType:C显示
      };
    },
    onSubmit() {
      this.Loading = true;
      addAndUpdateMenu(this.formData).then((res) => {
        this.Loading = false;
        if (res.data.resultStatus) {
          this.open = false;
          this.$message.success("新增成功");
          this.$emit("load");
        }
      });
    },
  },
};
</script>